<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        {{count}}
        <button @click="add">点击增加</button>
    </div>
    <hr>
    <div id="bpp">
        {{ count }}
    </div>
</body>
<script>

    const obj = {
        count: 100
    }

    const app = {
        // data 必须要是一个函数，而且要 return 出一个对象，因为
        // 每个页面或组件都需要有一个自己独立的作用域
        // 防止页面之间的相互污染
        data() {
            return obj
        },
        methods: {
            add() {
                this.count++
            }
        },
    }
    Vue.createApp(app).mount('#app')


    const bpp = {
        data() {
            return obj
        },
    }
    Vue.createApp(bpp).mount('#bpp')

</script>

</html>